<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-button type="primary" :icon="Plus" @click="openAppAdd()">创建应用</el-button>
      </el-header>
      <el-main style="background-color: beige">
        <el-empty description="无应用" v-show="emptyVisiable" />
        <el-row v-if="apps && apps.length" type="flex" style="flex-wrap: wrap">
          <el-col
            v-for="app in apps"
            :key="app.appId"
            :offset="0"
            style="margin-bottom: 20px"
            :xs="{ span: 24 }"
            :sm="{ span: 12 }"
            :md="{ span: 8 }"
            :lg="{ span: 6 }"
          >
            <el-card class="box-card" shadow="always">
              <template #header>
                <div class="card-header">
                  <span>{{ app.appName }}</span>
                  <el-button type="primary" @click="openAppManager(app.appId)">管理</el-button>
                </div>
              </template>
              <div class="text item">应用包名： {{ app.packageName }}</div>
              <div class="text item">最新版本： {{ app.latestVersion }}</div>
              <div class="text item">最新状态：{{ app.status }}</div>
              <div class="text item">创建时间：{{ app.pushTime }}</div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-dialog v-model="dialogVisible" title="创建应用" width="30%" :close="refresh" :destroy-on-close="true">
      <AppAdd />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, provide } from 'vue'
import { useRouter } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'

import { AppListApi } from '@/api'
import type { AppListResult } from '@/api/types'
import AppAdd from '@/views/app-add.vue'
import { useCounterStore } from '@/stores/manage'

const manager = useCounterStore()
const router = useRouter()
const apps = ref<AppListResult[]>([])
const dialogVisible = ref(false)

const emptyVisiable = ref(false)

onBeforeMount(async () => {
  // 应用列表数据接口
  refresh()
})

// 打开创建页面
const openAppAdd = () => {
  dialogVisible.value = true
}

// 关闭创建页面
const closeAppAdd = () => {
  dialogVisible.value = false
}

// 跳转到应用管理页面
const openAppManager = (id: string) => {
  // 把应用的标识符交给状态管理器，便于其他文件获取
  manager.resetAppId(id)
  // 跳转到管理页面
  router.push({ path: '/manage' })
}

// 刷新
const refresh = async () => {
  // 应用列表数据接口
  const response = await AppListApi()
  const apiData = response.data
  const appsInfo: AppListResult[] = apiData.data
  if (appsInfo == null || appsInfo.length == 0) {
    emptyVisiable.value = true
  } else {
    emptyVisiable.value = false
  }
  apps.value = appsInfo
}

provide('closeAppAdd', closeAppAdd)
provide('refreshList', refresh)
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 380px;
}
.badge {
  margin-right: 30px;
}
</style>
